<template>
  <div>
    <PageTools>
      <template #left>
        <el-alert
          :title="`当前共有${total}条记录`"
          type="info"
          show-icon
          :closable="false"
        />
      </template>
      <template>
        <el-button
          size="small"
          type="danger"
          @click="exportExcel"
        >普通excel导出
        </el-button>
        <el-button size="small" type="warning">复杂excel导出</el-button>
        <el-button
          size="small"
          type="success"
          @click="$router.push('/import')"
        >excel导入</el-button>
        <el-button
          size="small"
          type="primary"
          @click="show = true"
        >新增员工</el-button>
      </template>
    </PageTools>
    <el-card style="margin: 20px">
      <el-table :data="rows" border>
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="头像">
          <template #default="{ row }">
            <img
              v-imgerror
              style="width: 60px; height: 60px"
              :src="row.staffPhoto"
              alt=""
              @click="showEwm(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式" prop="formOfEmployment">
          <!-- 在filters。js中配置的 -->
          <template #default="{ row }">
            {{ row.formOfEmployment | form }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" sortable prop="timeOfEntry" />

        <el-table-column label="账户状态" prop="enableState">
          <template #default="{ row }">
            <el-switch :vlaue="row.enableState" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280px">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="$router.push('/employees/detail/' + row.id)"
            >查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="showRole(row.id)">角色</el-button>
            <el-button type="text" disabled>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="params.size"
          @current-change="change"
        />
      </div>
    </el-card>
    <!-- <AddEmployee :dialog-visible="show" @update:dialogVisible="show=$event" /> -->
    <AddEmployee :dialog-visible.sync="show" />
    <el-dialog title="二维码" :visible.sync="show1">
      <canvas ref="canvas" />
    </el-dialog>
    <el-dialog title="分配角色" :visible.sync="roleVisible" width="50%">
      <el-checkbox-group v-model="checkedRolList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeList } from '@/api/employees'
import AddEmployee from './components/add-employee.vue'
import QRCode from 'qrcode'
import { getRoleList } from '@/api/setting'
import { getUserDetailById, assignRoleToUser } from '@/api/user'
export default {
  name: 'Employees',
  components: {
    AddEmployee
  },
  data() {
    return {
      params: {
        page: 1,
        size: 10
      },
      rows: [],
      total: null,
      show: false,
      show1: false,
      roleVisible: false,
      roleList: [],
      checkedRolList: [],
      id: null
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      const { rows, total } = await getEmployeeList(this.params)
      this.rows = rows
      this.total = total
    },
    change(current) {
      this.params.page = current
      this.getEmployeeList()
    },
    async exportExcel() {
      const { rows } = await getEmployeeList({ page: 1, size: 999999999999 })
      const arr = []
      rows.forEach((item) => {
        const arr1 = []
        arr1.push(item.username)
        arr1.push(item.mobile)
        arr1.push(item.timeOfEntry)
        arr1.push(item.formOfEmployment)
        arr1.push(item.correctionTime)
        arr1.push(item.workNumber)
        arr1.push(item.departmentName)
        arr.push(arr1)
      })
      console.log(arr)
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = [
          '姓名',
          '手机号',
          '聘用形式',
          '入职日期',
          '转正日期',
          '工号',
          '部门'
        ]
        const data = arr
        excel.export_json_to_excel({
          header: tHeader, // 表头必填
          data, // 数据必填
          filename: 'excel-list', // 非必填
          autowidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    showEwm(url) {
      console.log(url)
      this.show1 = true
      this.$nextTick(() => {
        var canvas = this.$refs.canvas
        var opts = {
          errorCorrectionLevel: 'H',
          type: 'image/jpeg',
          quality: 0.3,
          margin: 1,
          color: {
            dark: '#ff0000',
            light: '#FFBF60FF'
          }
        }
        QRCode.toCanvas(canvas, url, opts, 'sample text', function(error) {
          if (error) console.error(error)
          console.log('success!')
        })
      })
    },
    // 角色列表渲染
    async showRole(id) {
      this.id = id
      const res1 = await getUserDetailById(id)
      this.checkedRolList = res1.roleIds
      // console.log('res1----------', res1)
      // console.log(id)
      const res = await getRoleList({ page: 1, pagesize: 99999 })
      // console.log(res)
      this.roleList = res.rows
      // console.log(this.roleList)
      this.roleVisible = true
    },
    // 权限分配
    async saveRole() {
      await assignRoleToUser({ roleIds: this.checkedRolList, id: this.id })
      this.$message.success('为员工分配角色成功')
      this.roleVisible = false
    }
  }
}
</script>

<style scoped lang='scss'></style>
